<template>
  <div id="mytable">
    <table id="customers">
      <tr>
        <th class="key">参数名</th>
        <th class="value">参数值</th>
        <th class="desc">描述</th>
        <th class="operation">操作</th>
      </tr>

      <tr v-for="(item,index) in data">
        <td>
          <el-input v-model="item.k"  class="key"></el-input>
        </td>
        <td >
          <el-input v-model="item.v"  class="value"></el-input>
        </td>
        <td >
          <el-input v-model="item.d" class="desc"></el-input>
        </td>
        <td>
          <div class="operation">
            <el-button @click="RemoveRow(data,index)" style="color: #8d0404" link><el-icon><DeleteFilled /></el-icon></el-button>
          </div>
        </td>
      </tr>
    </table>
    <el-divider>
      <el-button @click="AddRow(data)"  plain link><el-icon><Plus /></el-icon></el-button>
    </el-divider>
  </div>


</template>
<script lang="ts">
export default {
  name: 'ApiTable',
}
</script>

<script lang="ts" setup>
defineProps(['data'])
const AddRow = (arr)=>{
  arr.push({"k":"","v":"","d":""})
}
const RemoveRow = (arr,index)=>{
  arr.splice(index, 1)
}
</script>

<style scoped>
#mytable {
  height: 320px;
  width: 100%;
  max-height: 320px;
  overflow: auto;
  margin-bottom: 20px;
}

#customers {
  font-family:"微软雅黑";
  width:100%;
  overflow: auto;
  border-collapse:collapse;
}

#customers td, #customers th
{
  font-size:1em;
  border:1px solid #aaada2;
  background-color: white;
  padding:0 10px;
}

#customers th
{
  font-size:1.1em;
  text-align:center;
  padding-top:5px;
  padding-bottom:4px;
  background-color: #54564f;
  color:#ffffff;
}

#customers tr.alt td
{
  color:#000000;
  text-align:center;
  background-color:#EAF2D3;
}

table {
  width: 100%;
  font-size: 14px;
  background-color: #F8F8F8;
}

th {
  color:rgb(33, 27, 38);
  background-color: rgba(200, 200, 200, 0.9);
  height: 30px;
  border: 1px #c58888 solid;
}

td {
  background-color: #EEE;
  border: 1px #c58888 solid;
}

.el-input {
  width: 100%;
}

.el-divider {
  align-items: center;
  color: red !important;
  margin: 20px 0 0 0;
  background-color: #178093;
  width: 80vw;
}

:deep(.el-divider__text){
  padding: 0 3px;
}

.key{
  width: 10vw;
}


.value {
  width: 30vw;
}

.desc {
  width: 20vw;
}

.operation {
  width: 5vw;
}
:deep(.el-input__wrapper ){
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

</style>